import { FC, useContext } from 'react';
import { DragSource } from 'react-dnd';
import { Button } from 'antd';
import { endDrag, beginDrag, sourceCollect, uuid } from '@/utils';
import { DesignRedux } from '..//DesignRedux';

const BoxFC: FC<any> = (param: any) => {
  const { title, isDragging, connectDragSource } = param;
  return (
    <Button {...param} ref={connectDragSource} block>
      {title}
    </Button>
  );
};

// 按钮可以被拖动
const LeftBtn = DragSource(
  'box',
  {
    beginDrag, // 开始拖动
    endDrag: (props: any, monitor: any) => {
      // 通过全局方法
      const dropResult = monitor.getDropResult();
      const { changeCardList, ...otherParam } = props;
      let currentNode = { ...otherParam, id: uuid() };
      if (dropResult && changeCardList) {
        changeCardList({ dropResult, currentNode });
      }
    }, // 拖动完成
  },
  (connect: any, monitor: any) => sourceCollect(connect, monitor),
)(BoxFC);

export default LeftBtn;
